import React, { Component } from 'react'
import { Button, Space, Input, message } from 'antd';
import css from './index.module.css'

export default class Header extends Component {
  state = {
    todoName: ''
  }

  render() {
    
    return (
      <Space.Compact className={css.container}>
        <Input placeholder="请输入" allowClear onChange={this.onSetName} onPressEnter={this.onAddTodos} value={this.state.todoName} />
        <Button type="primary" onClick={this.onAddTodos}>添加待办</Button>
      </Space.Compact>
    )
  }
  onSetName = (e) => {
    this.setState({ todoName: e.target.value })
  }
  onAddTodos = () => {
    // 解构赋值笔记
    // 例：const dome = { a: {b: 2} }
    // 解构a: const { a } = dome
    // 解构b:
    // 方法一(普通)： const { b } = dome.a
    // 方法二(连续解构)：const { a: {b} } = demo，此时只解构了b，并没有解构a，a是undefined
    // 方法三(联系结构+重命名) const { a: {b: data} } = demo，此时将b重命名为data
    const { onAddTodos } = this.props;
    if(this.state.todoName === '') {
      message.error({ content: '事项名称不能为空'});
      return;
    }
    onAddTodos(this.state.todoName)
    this.setState({ todoName: '' })
  }
}
